<template>
  <div class="page">
      <!-- 头部导航 -->
      <div class="head" @click="top()">
          <img src="@/assets/school/school.jpg" alt="">
          <span>认证成为专家</span>
      </div>
      <div>
          <div class="exportitem">
              <img :src="proveimg" class="proveimg" v-if="isprove" @click="upprovefile(1)">
               <div class="imgdiv" @click="upprovefile(1)" v-else>
                   <img  src="@/assets/expert/gz.png">
                   <label>请上传工作证或职称证明</label>
               </div>
              <input type="file" style="display: none" ref="prove_file"  @change="changeprovefile">
          </div>
          <div class="exportitem1">
              <img :src="frontimg" class="frontimg" v-if="isfront" @click="upprovefile(2)">
             <div class="imgdiv" @click="upidfront(2)" v-else>
                  <img src="@/assets/expert/zm.png">
                  <label>请上传身份证正面照</label>
                 <input type="file" style="display: none" ref="id_front" @change="changeprovefile">
              </div>
              <img :src="backimg" class="backimg" v-if="isback" @click="upprovefile(3)">
              <div class="imgdiv" @click="upidback(3)" v-else>
                  <img src="@/assets/expert/fm.png">
                  <label>请上传身份证反面</label>
                  <input type="file" style="display: none" ref="id_back" @change="changeprovefile">
              </div>
          </div>
          <div class="chooselabel">
              <label class="choosetitle">选择专业
              </label>
              <div class="chooseitem">
                  <label v-for="(item,index) in tablist" :key="index" @click="choose(item.id)" :class="item.active?'zidingyi':''">{{item.major_name}}</label>
                <!--  <label :class="iscustom?'zidingyi':''"  @click="custom()">自定义</label>-->
              </div>
          </div>
          <div class="mobile">
              <label>联系电话</label>
              <input type="text" placeholder="请输入您的手机号" v-model="mobile">
          </div>
          <div class="code">
              <input type="text" placeholder="请输入验证码" v-model="code">
              <label @click="getcode()">{{codetext}}</label>
          </div>
          <button class="authentication" @click="authentication">提交认证</button>
      </div>
  </div>
</template>

<script>
    import {gettoken, authentication, majortab} from "../../request/expert";
    import { Toast } from 'vant';
    import axios from 'axios';
export default {
  name: '',
  data() { 
    return {
        proveimg:"",  /*缩略图*/
        frontimg:"",
        backimg:"",
        token:"",
        type:1,
        provekey:"",
        frontkey:"",
        backkey:"",
        mobile:"",
        code:"",
        majorid:"1",
        isprove:false,
        isfront:false,
        isback:false,
        codetext:"获取验证码",
        timer:null,
        is_update:0,
        tablist:[],
        iscustom:false
    }
  },
  props: {

  },
  components:{
  },
  mounted() {

      var that=this;
      /*else
      {
          that.majorid=this.$route.query.id;
      }*/
      gettoken().then(res => {
          that.token=res.data.result.data;
      });
      that.gettablist();
      that.iscustom=false;
      if(this.$route.params.successdata!=undefined&&this.$route.params.successdata!="undefined")
      {
          var successdata=JSON.parse(this.$route.params.successdata);
          that.proveimg=successdata.proveimg;
          that.frontimg=successdata.frontimg;
          that.backimg=successdata.backimg;
          that.provekey=successdata.provekey;
          that.frontkey=successdata.frontkey;
          that.backkey=successdata.backkey;
          that.majorid=successdata.majorid;
          that.isprove=true;
          that.isfront=true;
          that.isback=true;
          that.is_update=1;
          console.log(successdata.majorid);
      }
  },
  methods:{
      upprovefile:function (type) {

          this.$refs.prove_file.click();
          this.type=type;
      },
      changeprovefile:function (e) {
          var that=this;
          const files = e.target.files
          let filename = files[0].name          //只有一个文件
          if ( filename.lastIndexOf('.') <= 0 ) {
              return alert("Please add a valid image!")        //判断图片是否有效
          }
          const fileReader = new FileReader()                //内置方法new FileReader()   读取文件
          fileReader.addEventListener('load',() => {
              if(that.type==1)
              {

                  that.proveimg = fileReader.result
              }
              if(that.type==2)
              {

                  that.frontimg = fileReader.result
              }
              if(that.type==3)
              {

                  that.backimg = fileReader.result
              }
          })
          fileReader.readAsDataURL(files[0])
          if(that.type==1)
          {
              that.proveimg = files[0];
          }
          if(that.type==2)
          {
              that.frontimg = files[0];
          }
          if(that.type==3)
          {
              that.backimg = files[0];
          }

          const axiosInstance = axios.create({withCredentials: false});
          let data = new FormData();
          data.append('token',  that.token);     //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
          data.append('file', files[0]);
          axiosInstance({
              method: 'POST',
              url: 'http://up-z1.qiniup.com/',  //上传地址
              data: data,
              timeout:30000,      //超时时间，因为图片上传有可能需要很
          }).then(data =>{
              console.log(files[0])
             if(that.type==1)
             {
                 that.provekey=data.data.key;
                 that.isprove=true


             }
              if(that.type==2)
             {
                 that.frontkey=data.data.key;
                 that.isfront=true


             }
              if(that.type==3)
              {
                  that.backkey=data.data.key;
                  that.isback=true

              }
          }).catch(function(err) {

          });
      },
      upidfront:function(type){
          this.$refs.id_front.click();
          this.type=type;
      },

      upidback:function(type){
          this.$refs.id_back.click();
          this.type=type;
      },
      /*提交审核*/
      authentication:function () {
          var that=this;
          if(that.provekey=="")
          {
              Toast("请上传工作证或职称证明！");
              return false;
          }
          if(that.frontkey=="")
          {
              Toast("请上传身份证正面照！");
              return false;
          }
          if(that.backkey=="")
          {
              Toast("请上传身份证反面照！");
              return false;
          }
          if(that.majorid=="")
          {
              Toast("请选择专业！");
              return false;
          }
          if(that.mobile=="")
          {
              Toast("手机号码不能为空！");
              return false;
          }
          if(!(/^1[3456789]\d{9}$/.test(that.mobile))){
              Toast("手机号码有误，请重填");
              return false;
          }
          if(that.code=="")
          {
              Toast("请输入验证码！");
              return false;
          }

          var data={
              prove_file:that.provekey,
              id_front:that.frontkey,
              id_back:that.backkey,
              user_id:"111",
              user_phone:that.mobile,
              major_id:that.majorid,
              is_update:that.is_update
          }
          var successdata={
              proveimg:that.proveimg,
              frontimg:that.frontimg,
              backimg:that.backimg,
              provekey:that.provekey,
              frontkey:that.frontkey,
              backkey:that.backkey,
              majorid:that.majorid
          }
          authentication(data).then(res => {
                if(res.data.code==0)
                {
                    successdata=JSON.stringify(successdata);
                    this.$router.push({name:'successsumbit',params:{successdata:successdata}});
                }
          });
      },
      top:function(){
          this.$router.go(-1)
      },
      /*获取验证码*/
      getcode:function () {
          var that=this;
          that.codetext="("+60+"秒)"
          var num=60;

          that.timer=setInterval(function () {
              if(num<=0)
              {
                  clearInterval(that.timer);
                  that.codetext="获取验证码"
                  return false;
              }
              num--;
              that.codetext="("+num+"秒)";
          }, 1000)
      },
    gettablist:function () {
        var that=this;
        majortab().then(res => {
            var tablist=res.data.result.data;
           /* var objectitem={
                id:0,
                major_name:"全部",
                state:1
            }
            tablist.unshift(objectitem)*/
           /* for(var i=0;i<tablist.length;i++)
            {
                tablist[i].active=false;
            }
            that.tablist=tablist;
            var tablist=that.tablist;*/
            for(var i=0;i<tablist.length;i++)
            {
                if(this.$route.params.successdata!=undefined&&this.$route.params.successdata!="undefined")
                {
                    var successdata=JSON.parse(this.$route.params.successdata);
                    if(i+1==successdata.majorid)
                    {
                        tablist[i].active=true;
                        that.majorid=tablist[i].id;
                    }
                    else
                    {
                        tablist[i].active=false;
                    }
                }
                else
                {
                    if(i+1==1)
                    {
                        tablist[i].active=true;
                        that.majorid=tablist[i].id;
                    }
                    else
                    {
                        tablist[i].active=false;
                    }
                }


            }
            that.tablist=tablist;
        });
    },
      choose:function(num){

          var that=this;
          that.iscustom=false;
          var tablist=that.tablist;

          for(var i=0;i<tablist.length;i++)
          {
              if(i+1==num)
              {
                  tablist[i].active=true;
                  that.majorid=tablist[i].id;
              }
              else
              {
                  tablist[i].active=false;
              }

          }
          that.tablist=tablist;
      },
      custom:function () {
          this.iscustom=true;
          var that=this;
          var tablist=that.tablist;

          for(var i=0;i<tablist.length;i++)
          {

                  tablist[i].active=false;


          }
          that.tablist=tablist;
      }

  },
watch:{

},
 }
</script>
<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        background-color: #000000;
        color: #ffffff;
    }
    .head
    {
        width: 100%;
        height: 88px;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        position: relative;
    }
    .head img
    {
        width: 54px;
        height: 45px;
        display: block;
        position: absolute;
        top: 19px;
        left: 10px;
    }
    .head span
    {
        display: block;
        font-size:40px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        opacity:1;
        text-align: center;
        line-height: 88px;
    }
    .exportitem
    {
        width: 90%;
        margin:0 auto;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        padding-bottom: 30px;

    }
    .exportitem .imgdiv,.proveimg
    {
        display: block;
        width: 80%;
        height:403px;
        background:rgba(35,35,35,1);
        opacity:1;
        border-radius:10px;
        margin:0 auto;
        overflow: hidden;
        margin-top: 30px;
    }
    .exportitem .imgdiv img
    {
        width: 308px;
        height: 180px;
        display: block;
        margin: 0 auto;
        margin-top: 90px;
    }
    .exportitem .imgdiv label
    {
        display: block;
        font-size:28px;
        font-family:PingFang-SC-Medium;
        color:rgba(255,255,255,1);
        opacity:1;
        text-align: center;
        margin-top: 30px;
    }
    .exportitem1
    {
        width: 90%;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        margin-top: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        padding-bottom: 30px;
    }
    .exportitem1 .imgdiv,.frontimg,.backimg
    {
        display: block;
        width: 48%;
        height:230px;
        background:rgba(35,35,35,1);
        opacity:1;
        border-radius:10px;
        margin-right:4% ;
    }
    .exportitem1 .imgdiv img, .exportitem1 .imgdiv label
    {
        display: block;
    }
    .exportitem1 .imgdiv img
    {
        width:160px ;
        height: 110px;
        margin: 0 auto;
        margin-top: 30px;
    }
    .exportitem1 .imgdiv label
    {
        font-size:28px;
        font-family:PingFang-SC-Medium;
        color:rgba(255,255,255,1);
        opacity:1;
        text-align: center;
        margin-top: 30px;
    }
    .mobile
    {
        margin-top: 40px;
    }
    .mobile,.code
    {
        width: 90%;
        height: 109px;
        margin: 0 auto;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        display: flex;
        justify-content: space-between;
    }
    .mobile label,.mobile input
    {
        display: block;
    }
    .mobile label
    {
        font-size:34px;
        font-family:PingFang-SC-Medium;
        color:rgba(255,255,255,1);
        opacity:1;
        line-height: 109px;
    }
    .mobile input,.code input
    {
        background: none;
        border:none;
        font-size:34px;
        font-family:PingFang-SC-Medium;
        color:rgba(255,255,255,1);
        opacity:0.32
    }
    .mobile input
    {
        text-align: right;
    }
    .code label
    {
        font-size:34px;
        font-family:PingFang-SC-Medium;
        color:rgba(254,163,0,1);
        opacity:1;
        line-height: 109px;
    }
    .authentication
    {
        display: block;
        width:678px;
        height:86px;
        background:rgba(253,0,0,1);
        opacity:1;
        border-radius:10px;
        margin: 0 auto;
        margin-top: 78px;
        border:none;
        font-size:36px;
        font-family:PingFang-SC-Bold;
        line-height:86px;
        color:rgba(255,255,255,1);
        opacity:1;
    }

    .choosetitle
    {
        font-size:34px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .chooseitem
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .chooseitem label
    {
        min-width: 100px;
        display: block;
        font-size:28px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        background:rgba(35,35,35,1);
        border-radius:50px;
        padding: 10px;
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
    }
    .chooselabel
    {
       width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.4);
    }
    .zidingyi
    {
        background:none;
        border:2px solid #FFE600;
        color: #FFE600 !important;
    }

</style>